﻿@page "/components/scrollablepane"

<PageOutlet Url="components/scrollablepane"
            Title="ScrollablePane"
            Description="scrollablepane component of the bit BlazorUI components" />

<div>
    <DemoPage Name="ScrollablePane"
              SecondaryNames="@(["ScrollView"])"
              Description="A ScrollablePane is a component for scrolling through content that doesn't fit entirely on the screen."
              Parameters="componentParameters"
              PublicMembers="componentPublicMembers"
              SubEnums="componentSubEnums"
              GitHubUrl="Surfaces/ScrollablePane/BitScrollablePane.razor"
              GitHubDemoUrl="Surfaces/ScrollablePane/BitScrollablePaneDemo.razor">
        <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
            <BitScrollablePane Style="height:350px;" Class="pane">
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
                <br />
                Imagine this space as a window into the future empty yet alive with the energy of endless possibilities.
                These words stand as temporary guides, placeholders that whisper of what is to come.
                They hold the promise of stories waiting to unfold, ideas eager to take shape, and
                connections that will soon emerge to inspire and resonate. This is not an empty page;
                it is a canvas, rich with potential and ready to transform into something meaningful.
                <br />
                For now, these lines are here to remind you of the beauty of beginnings. They are the quiet before the symphony,
                the foundation upon which your creativity will build. Soon, this space will hold your thoughts, your visions,
                and your voice a reflection of who you are and what you wish to share with the world. Every sentence will carry
                purpose, every word will invite others to connect, to think, to feel. So take a moment to dream, to imagine
                what this blank slate can become. Whether it’s a story, an idea, or a message that matters, this is your
                starting point. The possibilities are endless, and the journey begins now.
            </BitScrollablePane>
        </DemoExample>

        <DemoExample Title="Width & Height" RazorCode="@example2RazorCode" Id="example2">
            <div>Height:</div><br />
            <BitScrollablePane Height="15rem" Class="pane">
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitScrollablePane>
            <br /><br /><br /><br />
            <div>Width:</div><br />
            <BitScrollablePane Width="300px" Class="pane" Style="white-space:nowrap">
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitScrollablePane>
        </DemoExample>

        <DemoExample Title="Overflow" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
            <div style="max-width: 19rem;">
                <BitChoiceGroup @bind-Value="overflow"
                                Horizontal
                                Label="Overflow"
                                TItem="BitChoiceGroupOption<BitOverflow>" TValue="BitOverflow">
                    <BitChoiceGroupOption Text="Auto" Value="BitOverflow.Auto" />
                    <BitChoiceGroupOption Text="Hidden" Value="BitOverflow.Hidden" />
                    <BitChoiceGroupOption Text="Scroll" Value="BitOverflow.Scroll" />
                    <BitChoiceGroupOption Text="Visible" Value="BitOverflow.Visible" />
                </BitChoiceGroup>
                <br />
                <BitNumberField Label="Items count" Min="4" @bind-Value="@overflowItemsCount" />
                <br />
                <BitScrollablePane Overflow="@overflow" Height="16rem" Class="pane">
                    @for (int i = 0; i < overflowItemsCount; i++)
                    {
                        var index = i;
                        <div class="item">@index</div>
                    }
                </BitScrollablePane>
            </div>
        </DemoExample>

        <DemoExample Title="Scrollbar gutter" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
            <div style="max-width: 19rem;">
                <BitChoiceGroup @bind-Value="gutter"
                                Horizontal
                                Label="Scrollbar gutter"
                                TItem="BitChoiceGroupOption<BitScrollbarGutter>" TValue="BitScrollbarGutter">
                    <BitChoiceGroupOption Text="Auto" Value="BitScrollbarGutter.Auto" />
                    <BitChoiceGroupOption Text="Stable" Value="BitScrollbarGutter.Stable" />
                    <BitChoiceGroupOption Text="BothEdges" Value="BitScrollbarGutter.BothEdges" />
                </BitChoiceGroup>
                <br />
                <BitNumberField Label="Items count" Min="4" @bind-Value="@gutterItemsCount" />
                <br />
                <BitScrollablePane Gutter="@gutter" Height="16rem" Class="pane">
                    @for (int i = 0; i < gutterItemsCount; i++)
                    {
                        var index = i;
                        <div class="item">@index</div>
                    }
                </BitScrollablePane>
            </div>
        </DemoExample>

        <DemoExample Title="ScrollbarWidth" RazorCode="@example5RazorCode" Id="example5">
            <div>You can change the width of the scrollbar using the ScrollbarWidth parameter. Its default value is Auto.</div>
            <br /><br />
            <div>Thin:</div><br />
            <BitScrollablePane Style="height:300px;" Class="pane" ScrollbarWidth="BitScrollbarWidth.Thin">
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitScrollablePane>
            <br /><br /><br /><br />
            <div>None:</div><br />
            <BitScrollablePane Style="height:300px;" Class="pane" ScrollbarWidth="BitScrollbarWidth.None">
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitScrollablePane>
        </DemoExample>

        <DemoExample Title="ScrollbarColor" RazorCode="@example6RazorCode" Id="example6">
            <div>The colors of the scrollbar can be changed using the ScrollbarColor parameter.</div>
            <br /><br />
            <BitScrollablePane Style="height:300px;" Class="pane" ScrollbarColor="red blue">
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitScrollablePane>
        </DemoExample>

        <DemoExample Title="AutoScroll" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
            <div>Discover the AutoScroll feature of the BitScrollablePane in action here:</div>
            <br />
            <BitButton OnClick="AddAutoScrollContent">Add content periodically</BitButton>
            <br /><br />
            <BitScrollablePane Style="height:300px;" Class="pane" AutoScroll>
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
                <br /><br /><br />
                <div>additional content:</div>

                <pre style="all:revert">
                    @autoScrollContent
                </pre>
            </BitScrollablePane>
        </DemoExample>

        <DemoExample Title="Modern" RazorCode="@example8RazorCode" Id="example8">
            <div>The Modern flag parameter gives a modern look and feel to the scrollbars of the pane.</div>
            <br /><br />
            <div>Vertical:</div><br />
            <BitScrollablePane Style="height:300px" Class="pane" Modern>
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </BitScrollablePane>
            <br /><br /><br /><br />
            <div>Horizontal:</div><br />
            <BitScrollablePane Style="width:300px;white-space:nowrap" Class="pane" Modern>
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding.
                <br />
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding.
                <br />
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding.
            </BitScrollablePane>
        </DemoExample>
    </DemoPage>
</div>